<!-- 模板校验 -->
<h1 style="color: red;">模板校验</h1>

<input type="text" name="name" [(ngModel)]="user.name" required #spy>

<p>名字：{{user.name}} -- {{spy.className}}</p>



<!-- 模板变量 -->
<h1 style="color: red;">模板变量</h1>

<input type="text" name="name" [(ngModel)]="user.name" required minlength="4" #name='ngModel'>
<!-- 获取到校验的状态 -->
<p>valid: {{name.valid}}</p>
<p>invalid: {{name.invalid}}</p>
<p>dirty: {{name.dirty}}</p>
<p>touched: {{name.touched}}</p>
<p>errors: {{name.errors | json }}</p>


<!-- 表单提交 -->
<h1 style="color: red;">表单提交</h1>

<form (ngSubmit)='onSubmit()'>
  <input type="text" [(ngModel)]="user.name" name="name" required minlength="4" #name='ngModel'>

  <button type="submit" [disabled]='!name.valid'>提交</button>
</form>

<!-- 响应式表单校验 -->

<hr>
<h1 style="color: red;">响应式表单的校验</h1>
<p>要使用响应式表单控件，就要从 @angular/forms 包中导入 ReactiveFormsModule，并把它添加到你的 app.module.ts中 NgModule 的 imports 数组中</p>

<!--
  formGroup：表单
  formControlName：输入元素
 -->

<form [formGroup]='myGroup' (ngSubmit)='onSubmit()'>
  <input type="text" name="name" formControlName="name">
  <button type="submit">提交</button>
</form>

<!-- 自定义校验 -->
<h1 style="color: red;">自定义校验</h1>


